<template>
	<view class="page-wrapper">
		<view class="section-action u-flex">
      <view class="action-item" @tap="handleAddChild()">
        <image class="img" src="/static/images/login/add-child.png" mode=""></image>
        <view class="title">添加孩子</view>
      </view>
      <view class="action-item" @tap="handleScanCode()">
        <image class="img" src="/static/images/login/scan-code.png"></image>
        <view class="title">扫码关注</view>
      </view>
    </view>
    
    <view class="section-children">
      <view class="child-item u-flex" v-for="child in myChildren" :key="child.id" @tap="handleSelectChild(child)">
        <image class="img" :src="$IMG_URL + '/imgs/share/share_link.png'" mode=""/>
        <view class="title">{{child.name}}</view>
        <view class="u-iconfont uicon-arrow-right" style="color:#c6c6c6;font-size:34rpx;"></view>
      </view>
    </view>
    
    <view v-if="myChildren.length > 0" class="btn-groups-wrapper">
    	<button class="u-reset-button btn-primary" @tap="handleClose">绑定完成</button>
    </view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
  
export default {
	name: 'BindChildren',
  data() {
    return {
      myChildren: [],
    }
  },
  mounted(){
    this.$http('info.getBindChildrenInfo')
    .then(res => {
      const { status, data, msg } = res
      if (status === 200) {
        this.myChildren = data
      }
    });
  },
	methods: {
    ...mapActions(['showAuthModal']),
    handleAddChild() {
      this.showAuthModal('addChild')
    },
    handleScanCode() {
    },
    handleSelectChild(child) {},
    handleClose() {
      this.showAuthModal('')
    },
	}
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  background: #F8F8F8;
  height: 100%;
  padding: 32rpx 16rpx;
  
  .section-action {
    justify-content: space-between;
    
    .action-item {
      padding: 32rpx;
      width: 354rpx;
      background: #fff;
      box-shadow: 0px 4rpx 10rpx 0px rgba(226, 240, 255, 0.5);
      border-radius: 12rpx;
      
      .img {
        width: 100rpx;
        height: 100rpx;
      }
      
      .title {
        margin-top: 25rpx;
        font-size: 34rpx;
        font-weight: 500;
        color: #999999;
      }
    }
  }

  .section-children {
    margin-top: 16rpx;
    
    .child-item {
      background: #fff;
      margin-bottom: 16rpx;
      padding: 16rpx 32rpx;
      box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(226, 240, 255, 0.5);
      border-radius: 12rpx;
      
      .img {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }
      
      .title {
        width: 530rpx;
        text-align: left;
        font-size: 34rpx;
        font-weight: 500;
        color: #333333;
      }
    }
  }
}
</style>
